<template>
  <div>
      <el-table
      :data="articleData ? articleData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()) || data.content.toLowerCase().includes(search.toLowerCase())) : articleData"
      style="width: 100%"
      max-height="560px"
      @selection-change="handleSelectionChange">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="发布时间" v-if="props.row.release_time">
              <span>{{ props.row.release_time }}</span>
            </el-form-item>
            <el-form-item label="点赞数">
              <span>{{ props.row.good_num }}</span>
            </el-form-item>
            <el-form-item label="评论数">
              <span>{{ props.row.comment_num }}</span>
            </el-form-item>
            <el-form-item label="分享数">
              <span>{{ props.row.share_num }}</span>
            </el-form-item>
            <el-form-item label="收藏数">
              <span>{{ props.row.collect_num }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="author_id"
        label="作者"
        width="150"
        align="center">
        官方账号
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        width="200"
        align="center">
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="200"
        align="center">
        <template slot-scope="scope">
          <div v-html="scope.row.content"></div>
        </template>
      </el-table-column>
      <!-- show-overflow-tooltip=true 让数据单行显示，不换行，超出用tooltip显示 -->
      <el-table-column
        prop="article_type_name"
        label="所属分类"
        align="center">
      </el-table-column>
      <el-table-column
        prop="state"
        label="文章状态"
        align="center">
        <template slot-scope="scope">
          {{ scope.row.state ? '已发布' : '草稿' }}
        </template>
      </el-table-column>
      <el-table-column>
        <template slot="header">
          <el-input
            style="width: 150px;"
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <!-- 修改 使用动态路由跳转到修改页面，读取数据显示到输入框里 -->
          <el-button type="primary" icon="el-icon-edit" size="small" circle @click="goUpdate(scope.row.article_id)"></el-button>
          <!-- 删除 点击弹出弹框 -->
          <el-button type="danger" icon="el-icon-delete" size="small" circle @click="confirmDelete(scope.row.article_id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button type="danger" @click="deleteAll()" :disabled="!articleData">全部删除</el-button>
    </div>
  </div>
</template>

<script>
  import {getArticle, deleteArticle} from 'network/article'
  import { getArticleTypeById } from 'network/articleType'
  import { dateFormat } from 'utils/dateFormat'

  export default {
    name: 'List',
    data() {
      return {
        // 海洋数据
        articleData: [],
        // 被选中的行
        multipleSelection: [],
        // 搜索框关键词
        search: ''
      }
    },
    methods: {
      // 传入数据id，跳转到修改页面
      goUpdate(id) {
        // this.$route.push(id)
        // 带查询参数，变成/backend/order?selected=2
        this.$router.push({path: '/article/update', query: {id: id}})
        // 命名的路由 parmas必须要用name
        // this.$router.push({ name: 'user', params: { userId: 123 }})
      },

      // 弹窗 传入数据id 是否确定删除
      confirmDelete(id) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 与数据库交互，删除该数据，post
          deleteArticle(id).then(res => {
            if (res.status === 1) return this.$message({
              type: 'error',
              message: res.message
            })
            this.getArticle()
            return this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })   
        })
      },

      // 多选框被选中时，保存被选中的数据
      handleSelectionChange(val) {
        this.multipleSelection = val
      },

      // 删除全部数据
      deleteAll() {
        if (this.multipleSelection.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有选中任何数据！'
          })
        }
        this.$confirm('此操作将删除所有数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 循环被选中的行数，删除数据
          this.multipleSelection.forEach(item => {
            let id = item.article_id
            deleteArticle(id).then(res => {
              if (res.status === 1) return this.$message({
                type: 'error',
                message: res.message
              })
              this.getArticle()
              return this.$message({
                type: 'success',
                message: '删除所有数据成功！'
              })
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })    
        })
      },

      // 获取文章数据
      getArticle() {
        // 发送网络请求
        getArticle().then(res => {
          if (res.status === 1) return console.log(res.message)
          this.articleData = res.data
          this.articleData.forEach(item => {
            // 获取每篇文章的文章分类
            getArticleTypeById(item.article_type_id).then(res => {
              if (res.status === 1) return console.log(res.message)
              this.$set(item, 'article_type_name', res.data.type_name)
              if (item.release_time) item.release_time = dateFormat(item.release_time)
            })
          })
        })
      }
    },
    created() {
      // 获取海洋数据
      this.getArticle()
    }
  } 
</script>

<style>
  /* 对表格设置样式 */
  .el-table {
    padding: 0 10px;
  }

  /* 对弹出框样式进行设置 */
  .el-tooltip__popper {
    max-width: 400px;
    font-size: 14px;
  }

  .el-table__row .el-table__cell:nth-child(4) div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 25px;
  }

  /* 对详情数据列进行多行显示超出隐藏 */
  .el-table__row .el-table__cell:nth-child(5) div {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 25px;
    padding: 0 10px;
  }

  /* 设置表格下拉后数据样式 */
  .demo-table-expand {
    font-size: 0;
    margin-left: 20px;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>